<template>
    <div>
        <div>
            <h1>事件处理</h1>
            <button @click="greet">Greet</button> <br />
            <!-- 使用内联箭头函数 -->
            <button @click="(event) => warn('Form cannot be submitted yet.', event)">
                Submit
            </button><br/>
        </div>

        <div>
            <h1>事件修饰符</h1>
            <!-- 单击事件将停止传递 -->
            <a @click.stop="doThis">doThis</a>

            <!-- 提交事件将不再重新加载页面 -->
            <form @submit.prevent="onSubmit">onSubmit</form>

            <!-- 修饰语可以使用链式书写 -->
            <a @click.stop.prevent="doThat">doThat</a>

            <!-- 也可以只有修饰符 -->
            <form @submit.prevent>
            </form>

            <!-- 仅当 event.target 是元素本身时才会触发事件处理器 -->
            <!-- 例如：事件处理器不来自子元素 -->
            <div @click.self="doThat">...</div>
        </div>

        <div>
            <!-- 仅在 `key` 为 `Enter` 时调用 `submit` -->

            <h1>按键修饰符</h1>
            enterUp :<input @keyup.enter="enterUp" text="仅在 `key` 为 `Enter` 时调用 `submit`"/> <br/>
            onPageDown : <input @keyup.page-down="onPageDown" />

        </div>

        <div>
            <!-- 仅在 `key` 为 `Enter` 时调用 `submit` -->

            <h1>系统按键修饰符</h1>
            Alt + Enter : <input @keyup.alt.enter="clear" />
    
            <div @click.shift="doSomething"> shift + 点击</div>
            <div @click.ctrl="doSomething">ctr + 点击</div>
        </div>
    </div>

</template>

<script>

export default {
    methods: {
        greet() {
            alert('Hello')
        },
        warn(message, event) {
            // 这里可以访问原生事件
            if (event) {
                event.preventDefault()
            }
            alert(message)
        },
        doThat() {
            alert('doThat')
        },
        doThis() {
            alert('doThis')
        },
        onSubmit() {
            alert('submit')
        },
        enterUp() {
            alert('仅在 `key` 为 `Enter` 时调用 `submit`')
        },
        onPageDown() {
            alert('onPageDown')
        },
        clear() {
            alert('clear')
         },
         doSomething() {
            alert('doSomething')
         },
    },
    mounted() {
        console.log('init success !')
    },
}
</script>
